<template>
  <view class="page-container">
    <!-- 顶头轮播区域 -->
    <swiper class="swiper-container" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
      <swiper-item v-for="(category, index) in carouselData" :key="index">
        <view class="swiper-item-content">
          <image style="width: 650rpx;height: 400rpx;margin: 10rpx 50rpx 10rpx 50rpx;" :src="category.image" mode="aspectFill" class="item-img"></image>
          <text class="carousel-title">{{ category.title }}</text>
          <text class="carousel-description">{{ category.description }}</text>
        </view>
      </swiper-item>
    </swiper>
    <!-- 页面标题 -->
    <view class="page-title">西安游玩指南</view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-item" @click="showSection('food')">西安美食</view>
      <view class="nav-item" @click="showSection('history')">历史景点</view>
      <view class="nav-item" @click="showSection('celebrity')">西安名人</view>
    </view>

    <!-- 内容展示区域，根据点击的导航切换显示不同内容 -->
    <view class="content-section" v-if="currentSection === 'food'">
      <view class="food-item" v-for="(food, index) in foodList" :key="index">
        <image :src="food.image" mode="aspectFit" class="item-image"></image>
        <view class="food-name">{{food.name}}</view>
        <view class="food-description">{{food.description}}</view>
      </view>
    </view>
    <view class="content-section" v-if="currentSection === 'history'">
      <view class="history-item" v-for="(historySpot, index) in historyList" :key="index">
        <image :src="historySpot.image" mode="aspectFit" class="item-image"></image>
        <view class="history-name" @click="navigateToLocation(historySpot.latitude, historySpot.longitude)">{{historySpot.name}}</view>
        <view class="history-description">{{historySpot.description}}</view>
      </view>
    </view>
    <view class="content-section" v-if="currentSection === 'celebrity'">
      <view class="celebrity-item" v-for="(celebrity, index) in celebrityList" :key="index">
        <image :src="celebrity.image" mode="aspectFit" class="item-image"></image>
        <view class="celebrity-name">{{celebrity.name}}</view>
        <view class="celebrity-description">{{celebrity.description}}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        currentSection: 'food', // 默认先显示美食板块
        foodList: [{
            name: "羊肉泡馍",
            description: "西安传统美食，料重味醇，肉烂汤浓，馍筋光滑，吃后回味无穷，是来西安必吃的特色小吃之一。",
            image: "/static/images/paomo.jpg" // 替换为真实羊肉泡馍图片路径
          },
          {
            name: "肉夹馍",
            description: "腊汁肉夹馍选用腊汁肉，剁碎夹于馍中，馍酥肉香，回味无穷，深受大众喜爱。",
            image: "/static/images/roujiamo.jpg" // 替换为真实肉夹馍图片路径
          },
          {
            name: "凉皮",
            description: "分为麻酱凉皮、秦镇凉皮等多种，口感爽滑，味道酸辣可口，是夏季消暑佳品。",
            image: "/static/images/mianpi.jpg" // 替换为真实凉皮图片路径
          }
        ],
        historyList: [{
            name: "西安城墙",
            description: "中国现存规模最大、保存最完整的古代城垣之一，见证了西安的历史变迁，漫步其上可感受古城韵味。",
            image: "/static/images/chengqiang.jpg", // 替换为真实西安城墙图片路径
            latitude: 34.2633, // 示例经纬度，需替换为真实值
            longitude: 108.9480 // 示例经纬度，需替换为真实值
          },
          {
            name: "大雁塔",
            description: "历史文化的象征，是为保存玄奘法师由天竺经丝绸之路带回长安的经卷佛像而建，建筑风格独特。",
            image: "/static/images/dayanta.jpg", // 替换为真实大雁塔图片路径
            latitude: 34.2433, // 示例经纬度，需替换为真实值
            longitude: 108.9410 // 示例经纬度，需替换为真实值
          },
          {
            name: "陕西历史博物馆",
            description: "汇聚了众多珍贵文物，展示了陕西地区悠久的历史文化，犹如一座历史的宝库。",
            image: "/static/images/bowuguan.jpg", // 替换为真实陕历博图片路径
            latitude: 34.2533, // 示例经纬度，需替换为真实值
            longitude: 108.9380 // 示例经纬度，需替换为真实值
          }
        ],
        celebrityList: [{
            name: "汉武帝刘彻",
            description: "西汉第七位皇帝，在位期间开疆拓土，使汉朝达到鼎盛，在西安这片土地留下诸多影响深远的举措。",
            image: "/static/images/liuche.jpg" // 替换为真实汉武帝图片路径
          },
          {
            name: "唐太宗李世民",
            description: "唐朝第二位皇帝，开创贞观之治，西安作为当时的都城，处处有着他治国理政的历史印记。",
            image: "/static/images/lishimin.jpg" // 替换为真实唐太宗图片路径
          },
          {
            name: "柳青",
            description: "当代著名作家，扎根陕西，其作品深刻反映了陕西地区的风土人情和时代变革，代表作有《创业史》等。",
            image: "/static/images/liuqing.jpg" // 替换为真实柳青图片路径
          }
        ],
        carouselData: [{
            title: "西安美食盛宴",
            description: "品味千年古都的舌尖韵味，领略特色美食风情。",
            image: "/static/images/huluji.jpg" // 替换为美食相关轮播图路径
          },
          {
            title: "历史遗迹探秘",
            description: "穿越时光，探寻西安深厚历史底蕴，见证岁月沧桑。",
            image: "/static/images/guji.jpg" // 替换为历史相关轮播图路径
          },
          {
            title: "名人足迹追寻",
            description: "聆听往昔故事，追寻西安名人的光辉足迹与卓越贡献。",
            image: "/static/images/zhangjiayi.jpg" // 替换为名人相关轮播图路径
          }
        ]
      };
    },
    methods: {
      showSection(section) {
        this.currentSection = section;
      },
	  // goToSection(section) {
	  //     this.$router.push({ path: `/${section}` });
	  //   }
      navigateToLocation(latitude, longitude) {
        // 使用uni-app的API打开外部地图应用进行导航，这里以高德地图为例
        uni.openLocation({
          latitude: latitude,
          longitude: longitude,
          provider: 'amap', // 指定使用高德地图
          success: function () {
            console.log('导航跳转成功');
          },
          fail: function (err) {
            console.log('导航跳转失败', err);
          }
        });
      }
    }
  };
</script>

<style>
  /* 页面整体容器样式，设置最大宽度并水平居中，使用弹性布局适应屏幕 */
 .page-container {
    display: flex;
    flex-direction: column;
    max-width: 750px;
    margin: 0 auto;
    width: 100%;
  }

  /* 顶头轮播区域样式，设置底色、圆角、阴影等，图片自适应 */
 .swiper-container {
    background-color: #f0f8ff; /* 淡蓝色底色 */
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }

 .swiper-item-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
  }

 .item-img {
    border-radius: 10px;
  }

 .carousel-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-top: 10px;
    text-align: center;
  }

 .carousel-description {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
    text-align: center;
  }

  /* 页面标题样式，设置字体、颜色、背景色、布局等 */
 .page-title {
    font-size: 24px;
    font-weight: bold;
    color: #ff6347;
    text-align: center;
    margin-bottom: 10px;
    background-color: #ffe4e1; /* 淡粉色底色 */
    padding: 10px;
    border-radius: 10px;
  }

  /* 导航栏样式，使用弹性布局平均分配空间，设置底色、圆角等 */
 .nav-bar {
    display: flex;
    justify-content: space-around;
    background-color: #add8e6; /* 浅蓝色底色 */
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
  }

 .nav-item {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
  }

 .nav-item:hover {
    background-color: #e0e0e0;
  }

  /* 内容展示区域通用样式，设置底色、圆角、阴影等 */
 .content-section {
    background-color: #ffffe0; /* 淡黄色底色 */
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  /* 美食模块中每个美食项的样式，内部元素布局等设置 */
 .food-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

 .item-image {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    margin-bottom: 5px;
  }

 .food-name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
  }

 .food-description {
    font-size: 14px;
    color: #666;
    text-align: center;
  }

  /* 历史景点模块中每个景点项的样式，与美食项类似但部分细节不同 */
 .history-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

 .history-name {
    font-size: 16px;
    font-weight: bold;
    color: #1e90ff;
    margin-bottom: 5px;
    cursor: pointer;
  }

 .history-description {
    font-size: 14px;
    color: #666;
    text-align: center;
  }

  /* 西安名人模块中每个名人项的样式，与其他项类似但部分细节不同 */
 .celebrity-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

 .celebrity-name {
    font-size: 16px;
    font-weight: bold;
    color: #800080;
    margin-bottom: 5px;
  }

 .celebrity-description {
    font-size: 14px;
    color: #666;
    text-align: center;
  }
</style>